<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">
    <meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
    <link rel="stylesheet" media="screen" href="__TMPL__/public/assets/css/login_style.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/login_reset.css"/>
    <include file="public@head_xy" />
    <style>
        a:hover{color: #0e93e0}
    </style>
</head>
<include file="public@nav"/>
<script>
    $(document).ready(function(){
        $("header").css("background-color","#060606");
        $(".head").css("background-color","#060606");
    });
</script>
<body class="body-white">
<div id="particles-js">
    <div class="login xy_login">
        <div class="regi-top">
            <notempty name="theme_vars.enable_mobile">
                <ul class="refi_Tab" id="myTab">
                    <li id="top_mobile" style="padding:50px 20px 40px 40px;"><a onclick="changeTap('1')" href="#mobile" data-toggle="tab">手机注册</a></li>
                    <li id="top_email" class="refi_active" style="padding:50px 40px 40px 20px;" ><a onclick="changeTap('2')" href="#email" data-toggle="tab">邮箱注册</a></li>
                </ul>
            </notempty>

            <php>
                $is_open_registration = cmf_is_open_registration();
            </php>
        </div>
        <div class="regi_tab-content">
            <notempty name="theme_vars.enable_mobile">
                <form id="regi-mobile" >
                    <div class="login-center clearfix">
                        <div class="login-center-input">
                            <input type="text" name="username" placeholder="手机号" id="js-mobile-input">
                            <div class="login-center-input-text">手机号</div>
                        </div>
                    </div>
                    <div class="login-center clearfix">
                        <div class="login-center-input" id="xy_cap1">
                            <input type="text" name="captcha" placeholder="验证码" style="width: 100px;height:38px;margin-right:50px;float: left;">
                            <div class="login-center-input-text">验证码</div>
                            <captcha height="38" width="130" font-size="20"/>
                        </div>
                    </div>
                    <empty name="is_open_registration">
                        <div class="login-center clearfix">
                            <div class="login-center-input">
                                <input type="text" name="code" placeholder="手机验证码"style="width: 100px;height:38px;margin-right:50px;float: left;">
                                <a class="btn btn-success js-get-mobile-code"
                                   style="width: 130px;position: absolute;top:0;right: 0;"
                                   data-wait-msg="[second]秒后才能再次获取" data-mobile-input="#js-mobile-input"
                                   data-url="{:url('user/VerificationCode/send')}"
                                   daty-type="register"
                                   data-init-second-left="60">获取手机验证码</a>
                            </div>
                        </div>
                    </empty>

                    <div class="login-center clearfix">
                        <div class="login-center-input">
                            <input type="password" name="password" value="" placeholder="密码" onfocus="this.placeholder=''" onblur="this.placeholder='密码'"/>
                            <div class="login-center-input-text">密码</div>
                        </div>
                    </div>

                    <div class="register-mobile-button">
                        确定注册
                    </div>

                    <div class="login-center clearfix" style="text-align: center;">
                        <p style="margin-top:20px">
                            已有账号? <a class="register-login-button" href="{:cmf_url('user/Login/index')}">点击此处登录</a>
                        </p>
                    </div>
                </form>
            </notempty>
            <form id="regi-email" style="display: none">
                <div class="login-center clearfix">
                    <div class="login-center-input">
                        <input type="text" name="username" placeholder="邮箱" id="js-email-input">
                        <div class="login-center-input-text">邮箱</div>
                    </div>
                </div>
                <div class="login-center clearfix">
                    <div class="login-center-input" id="xy_cap2">
                        <input type="text" name="captcha" placeholder="验证码" style="width: 100px;height:38px;margin-right:50px;float: left;">
                        <div class="login-center-input-text">验证码</div>
                        <captcha height="38" width="130" font-size="20"/>
                    </div>
                </div>
                <empty name="is_open_registration">
                    <div class="login-center clearfix">
                        <div class="login-center-input">
                            <input type="text" name="code" placeholder="邮件验证码"style="width: 100px;height:38px;margin-right:50px;float: left;">
                            <a class="btn btn-success js-get-email-code"
                               style="width: 130px;position: absolute;top:0;right: 0;"
                               data-wait-msg="[second]秒后才能再次获取" data-email-input="#js-email-input"
                               data-url="{:url('user/VerificationCode/send')}"
                               daty-type="register"
                               data-init-second-left="60">获取邮件验证码</a>
                        </div>
                    </div>
                </empty>

                <div class="login-center clearfix">
                    <div class="login-center-input">
                        <input type="password" name="password" value="" placeholder="密码" onfocus="this.placeholder=''" onblur="this.placeholder='密码'"/>
                        <div class="login-center-input-text">密码</div>
                    </div>
                </div>

                <div class="register-email-button">
                    确定注册
                </div>
                <div class="login-center clearfix" style="text-align: center;">
                    <p style="margin-top:20px">
                        已有账号? <a class="register-login-button" href="{:cmf_url('user/Login/index')}">点击此处登录</a>
                    </p>
                </div>
            </form>
        </div>
    <div class="sk-rotating-plane"></div>
</div>
</div>
<!-- /container -->
<include file="public@scripts_xy" />
<!-- scripts -->
<script src="__TMPL__/public/assets/js/login_particles.min.js"></script>
<script src="__TMPL__/public/assets/js/login_app.js"></script>
<script type="text/javascript">
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }

    // 获取指定子元素
    function children(curEle,tagName){
        var nodeList = curEle.childNodes;
        var ary = [];
        if(/MSIE(6|7|8)/.test(navigator.userAgent)){
            for(var i=0;i<nodeList.length;i++){
                var curNode = nodeList[i];
                if(curNode.nodeType ===1){
                    ary[ary.length] = curNode;
                }
            }
        }else{
            ary = Array.prototype.slice.call(curEle.children);
        }

        // 获取指定子元素
        if(typeof tagName === "string"){
            for(var k=0;k<ary.length;k++){
                curTag = ary[k];
                if(curTag.nodeName.toLowerCase() !== tagName.toLowerCase()){
                    ary.splice(k,1);
                    k--;
                }
            }
        }

        return ary;
    }

    document.querySelector(".register-mobile-button").onclick = function(){
        addClass(document.querySelector(".login"), "active");
        setTimeout(function(){
            addClass(document.querySelector(".sk-rotating-plane"), "active");
            document.querySelector(".login").style.display = "none"
        },1000)
        //提交表单
        setTimeout(function(){
            removeClass(document.querySelector(".login"), "active");
            removeClass(document.querySelector(".sk-rotating-plane"), "active");
            $.ajax({
                type: 'post',
                url: "{:url('user/Register/doRegister')}",
                data: $("#regi-mobile").serialize(),
                dataType: 'json',
                success: function (data) {
                    var obj = eval(data);
                    if (obj.code == 1) {
                        alert(obj.msg);
                        //console.log(data);
                        window.location.href = obj.url;
                    }
                    else if (obj.code == 0) {
                        var ele = document.getElementById('xy_cap');
                        alert(obj.msg);
                        document.querySelector(".login").style.display = "block";
                        // console.log(children(document.getElementById("xy_cap1"),"img"));
                        //window.location.reload();
                        children(document.getElementById("xy_cap1"),"img")[0].click();// 刷新下验证码
                    }
                    console.log(data);
                },
                error: function () {
                    alert("无法连接到服务器：失败了！");
                    window.location.reload();//重新刷新页面
                    return false;
                }
            });
            //alert("登录失败了")
        },3000);

    };

    document.querySelector(".register-email-button").onclick = function(){
        addClass(document.querySelector(".login"), "active");
        setTimeout(function(){
            addClass(document.querySelector(".sk-rotating-plane"), "active");
            document.querySelector(".login").style.display = "none"
        },1000);
        //提交表单
        setTimeout(function(){
            removeClass(document.querySelector(".login"), "active");
            removeClass(document.querySelector(".sk-rotating-plane"), "active");
            $.ajax({
                type: 'post',
                url: "{:url('user/Register/doRegister')}",
                data: $("#regi-email").serialize(),
                dataType: 'json',
                success: function (data) {
                    var obj = eval(data);
                    if (obj.code == 1) {
                        alert(obj.msg);
                        //console.log(data);
                        window.location.href = obj.url;
                    }
                    else if (obj.code == 0) {
                        var ele = document.getElementById('xy_cap');
                        alert(obj.msg);
                        document.querySelector(".login").style.display = "block";
                         //console.log(children(document.getElementById("xy_cap2"),"img"));
                        //window.location.reload();
                        children(document.getElementById("xy_cap2"),"img")[0].click();// 刷新下验证码
                    }
                    console.log(data);
                },
                error: function () {
                    alert("无法连接到服务器：失败了！");
                    window.location.reload();//重新刷新页面
                    return false;
                }
            });
            //alert("登录失败了")
        },3000);

    };
    //更换手机或邮箱注册的界面
    function changeTap(top){
        //console.log(top);
        if(top == "1"){
           // console.log(top)
            if(!hasClass(document.getElementById("top_email"), "refi_active")){
                addClass(document.getElementById("top_email"), "refi_active");
                removeClass(document.getElementById("top_mobile"), "refi_active");
                document.getElementById("regi-mobile").style.display ="block";
                document.getElementById("regi-email").style.display ="none";

            }

        }
        else if(top == "2"){
            if(!hasClass(document.getElementById("top_mobile"), "refi_active")){
                addClass(document.getElementById("top_mobile"), "refi_active");
                removeClass(document.getElementById("top_email"), "refi_active");
                document.getElementById("regi-mobile").style.display ="none";
                document.getElementById("regi-email").style.display ="block";
            }
        }
    }
</script>
</body>
</html>